<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Test: Box Shadow Syntax: Reordering Components</title>
  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"/>
  <link rel="match" href="box-shadow-syntax-001.xht"/>
  <meta name="assert" content="Box shadow color, inset, and length parameters can be mixed in any order, but lengths must stay adjacent." />
  <style type="text/css">

    .container {
      margin: 4px;
      border: solid red 4px;
      padding-top: 1px;
      border-style: none none solid solid;
    }
    .outset {
      height: 12px;
      margin: -5px -4px 0 0;

    }
    .inset {
      color: green;
      height: 13px;
      margin: -1px 0 -4px -4px;
    }

    /* color */
    #c1 > div { box-shadow: -4px 4px green;
                box-shadow: red;
                box-shadow: 4px red;
                box-shadow: red 4px;
                box-shadow: -4px red 4px;
                box-shadow: red -4px 4px red;
                box-shadow: -4px 4px red 0;
                box-shadow: -4px 4px 0 red 0;
    }
    #c2 > div { box-shadow: green -4px 4px;       }
    #c3 > div { box-shadow: -4px 4px 0 green;     }
    #c4 > div { box-shadow: green -4px 4px 0;     }
    #c5 > div { box-shadow: -4px 4px 0 0 green;   }
    #c6 > div { box-shadow: green -4px 4px 0 0;   }

    /* inset */
    #i1 > div { box-shadow: 4px -4px inset;       }
    #i2 > div { box-shadow: inset 4px -4px;       }
    #i3 > div { box-shadow: 4px -4px 0 inset;     }
    #i4 > div { box-shadow: inset 4px -4px 0;     }
    #i5 > div { box-shadow: 4px -4px 0 0 inset;   }
    #i6 > div { box-shadow: inset 4px -4px 0 0;   }
    #i7       { border-color: green;              }
    #i7 > div { box-shadow: 4px -4px green inset;
                color: red;
                box-shadow: inset;
                box-shadow: inset 4px;
                box-shadow: 4px inset;
                box-shadow: 4px inset -4px;
                box-shadow: inset 4px -4px inset;
                box-shadow: 4px -4px inset 0;
                box-shadow: 4px -4px 0 inset 0;
  }


    /* color and inset */
    #ci1 > div { box-shadow: 4px -4px green inset;

                 box-shadow: red inset;
                 box-shadow: inset red;

                 box-shadow: 4px red inset;
                 box-shadow: red inset 4px;
                 box-shadow: 4px inset red;
                 box-shadow: inset red 4px;

                 box-shadow: 4px red inset -4px;
                 box-shadow: 4px inset red -4px;
                 box-shadow: inset 4px red -4px;
                 box-shadow: 4px red 4px inset;
                 box-shadow: red 4px inset -4px;
                 box-shadow: 4px inset -4px red;

                 box-shadow: 4px -4px red inset 0;
                 box-shadow: 4px -4px inset red 0;
                 box-shadow: inset 4px -4px red 0;
                 box-shadow: 4px -4px red 0 inset;
                 box-shadow: red 4px -4px inset 0;
                 box-shadow: 4px -4px inset 0 red;
    }
    #ci2 > div { box-shadow: 4px -4px inset green; }
    #ci3 > div { box-shadow: inset green 4px -4px; }
    #ci4 > div { box-shadow: green inset 4px -4px; }
    #ci5 > div { box-shadow: green 4px -4px inset; }
    #ci6 > div { box-shadow: inset 4px -4px green; }

    #ci11 > div { box-shadow: inset green 4px -4px 0; }
    #ci12 > div { box-shadow: green inset 4px -4px 0; }
    #ci13 > div { box-shadow: 4px -4px 0 green inset; }
    #ci14 > div { box-shadow: 4px -4px 0 inset green; }
    #ci15 > div { box-shadow: green 4px -4px 0 inset; }
    #ci16 > div { box-shadow: inset 4px -4px 0 green; }

    #ci21 > div { box-shadow: inset green 4px -4px 0 0; }
    #ci22 > div { box-shadow: green inset 4px -4px 0 0; }
    #ci23 > div { box-shadow: 4px -4px 0 0 green inset; }
    #ci24 > div { box-shadow: 4px -4px 0 0 inset green; }
    #ci25 > div { box-shadow: green 4px -4px 0 0 inset; }
    #ci26 > div { box-shadow: inset 4px -4px 0 0 green; }
  </style>
 </head>
 <body>
  <p>There must be 31 green L-shapes below and no red.</p>

<div class="wrapper">
  <div id="c1" class="container"><div class="outset"></div></div>
  <div id="c2" class="container"><div class="outset"></div></div>
  <div id="c3" class="container"><div class="outset"></div></div>
  <div id="c4" class="container"><div class="outset"></div></div>
  <div id="c5" class="container"><div class="outset"></div></div>
  <div id="c6" class="container"><div class="outset"></div></div>
  <div id="i1" class="container"><div class="inset"></div></div>
  <div id="i2" class="container"><div class="inset"></div></div>
  <div id="i3" class="container"><div class="inset"></div></div>
  <div id="i4" class="container"><div class="inset"></div></div>
  <div id="i5" class="container"><div class="inset"></div></div>
  <div id="i6" class="container"><div class="inset"></div></div>
  <div id="i7" class="container"><div class="inset"></div></div>
  <div id="ci1" class="container"><div class="inset"></div></div>
  <div id="ci2" class="container"><div class="inset"></div></div>
  <div id="ci3" class="container"><div class="inset"></div></div>
  <div id="ci4" class="container"><div class="inset"></div></div>
  <div id="ci5" class="container"><div class="inset"></div></div>
  <div id="ci6" class="container"><div class="inset"></div></div>
  <div id="ci11" class="container"><div class="inset"></div></div>
  <div id="ci12" class="container"><div class="inset"></div></div>
  <div id="ci13" class="container"><div class="inset"></div></div>
  <div id="ci14" class="container"><div class="inset"></div></div>
  <div id="ci15" class="container"><div class="inset"></div></div>
  <div id="ci16" class="container"><div class="inset"></div></div>
  <div id="ci21" class="container"><div class="inset"></div></div>
  <div id="ci22" class="container"><div class="inset"></div></div>
  <div id="ci23" class="container"><div class="inset"></div></div>
  <div id="ci24" class="container"><div class="inset"></div></div>
  <div id="ci25" class="container"><div class="inset"></div></div>
  <div id="ci26" class="container"><div class="inset"></div></div>
</div>
 </body>
</html>
